<template>
  <div class="app-container container">
    <div class="this_main">
      <div class="main-left"></div>
      <div class="main-right">
        <!--工具栏-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <el-form size="small" label-width="100px" v-formkey="{query:crud.toQuery}">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                  <el-form-item label="查询内容">
                    <el-input
                      v-model="query.caName"
                      placeholder="按照资产名称进行查询"
                    />
                  </el-form-item>
                </el-col>               
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                  <rrOperation :crud="crud" />
                </el-col>
              </el-row>
            </el-form>
          </div>
          <crudOperation>
            <el-tooltip
              slot="right"
              class="item"
              content="新增"
              effect="dark"
              placement="top-start"
            >
              <el-button
                :loading="syncLoading"
                class="filter-item"
                icon="el-icon-add"
                size="mini"
                type="success"
                @click="addFixedAssets"
                >添加
              </el-button>
            </el-tooltip>
          </crudOperation>
        </div>
        <!--表格渲染-->
        <el-table
          ref="table"
          class="this-table"
          border
          v-loading="crud.loading"
          :data="crud.data"
          height="100%"
          @selection-change="crud.selectionChangeHandler"
        >
          <!-- <el-table-column
            :render-header="crud.renderHeader"
            type="selection"
            width="55"
          /> -->
          <el-table-column
            align="center"
            :render-header="crud.renderHeader"
            v-if="columns.visible('caName')"
            :show-overflow-tooltip="true"
            label="固定资产"
            prop="caName"
          />
          <el-table-column
            :render-header="crud.renderHeader"
            v-if="columns.visible('typeName')"
            :show-overflow-tooltip="true"
            label="类别"
            align="center"
            prop="typeName"
          />
          <el-table-column
            align="center"
            :render-header="crud.renderHeader"
            v-if="columns.visible('beforeAmount')"
            :show-overflow-tooltip="true"
            label="折旧前金额"
            prop="beforeAmount"
          />

          <el-table-column
            align="center"
            :render-header="crud.renderHeader"
            v-if="columns.visible('afterAmount')"
            :show-overflow-tooltip="true"
            label="折旧后金额"
            prop="afterAmount"
          />
          <el-table-column
            align="center"
            :render-header="crud.renderHeader"
            v-if="columns.visible('tranDeptName')"
            :show-overflow-tooltip="true"
            label="部门"
            prop="tranDeptName"
          />
          <el-table-column
            align="center"
            :render-header="crud.renderHeader"
            v-if="columns.visible('tranUserName')"
            :show-overflow-tooltip="true"
            label="经手人"
            prop="tranUserName"
          />

          <el-table-column
            align="center"
            :render-header="crud.renderHeader"
            v-if="columns.visible('createTime')"
            label="创建日期"
            prop="createTime"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :render-header="crud.renderHeader"
            v-if="columns.visible('absStr')"
            :show-overflow-tooltip="true"
            label="用户备注"
            prop="absStr"
          />
          <el-table-column
            :render-header="crud.renderHeader"
            align="center"
            fixed="right"
            label="操作"
            width="160px"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="editFixedAssets(scope.row)"
                style="margin-right: 2px"
                type="text"
                >编辑
              </el-button>
              <el-button
                size="mini"
                style="margin-left: -1px; margin-right: 2px"
                type="text"
                @click="delect(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </div>
    </div>
    <addDialog
      v-if="addDialog.show"
      :is-show="addDialog.show"
      :title="addDialog.title"
      :type="addDialog.type"
      :dialog-row="addDialog.dialogRow"
      @closeDialog="hideDialog"
      @getFundList="getFundList"
    />
  </div>
</template>

<script>
import { generator, sync } from "@/api/generator/generator";
import { getByParent, addOrSave,delectZhejiu } from "@/api/erp/fixedAssetsMain";
import { downloadFile } from "@/utils/index";
import CRUD, { header, presenter } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import pagination from "@crud/Pagination";
import { LOAD_CHILDREN_OPTIONS, Treeselect } from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import addDialog from "./addDialog";
import { getDepts } from "@/api/system/dept";
import { searchUser } from "@/api/system/user";
// crud交由presenter持有
const defaultCrud = CRUD({ url: "/api/caDiscountHis" });
export default {
  name: "fixedAssetsDepreciation",
  components: {
    pagination,
    crudOperation,
    rrOperation,
    Treeselect,
    addDialog
  },
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
      syncLoading: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      addTypeShow: false,
      addDialog: {
        type: "add",
        show: false,
        title: "资产折旧",
        dialogRow: {}
      },

      options: []
    };
  },
  created() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: false
    };
    this.getRootModels();
  },
  methods: {
    toGen(tableName) {
      // 生成代码
      generator(tableName, 0).then(data => {
        this.$notify({
          title: "生成成功",
          type: "success",
          duration: 2500
        });
      });
    },
    toDownload(tableName) {
      // 打包下载
      generator(tableName, 2).then(data => {
        downloadFile(data, tableName, "zip");
      });
    },
    sync() {
      const tables = [];
      this.crud.selections.forEach(val => {
        tables.push(val.tableName);
      });
      this.syncLoading = true;
      sync(tables)
        .then(() => {
          this.crud.refresh();
          this.crud.notify("同步成功", CRUD.NOTIFICATION_TYPE.SUCCESS);
          this.syncLoading = false;
        })
        .then(() => {
          this.syncLoading = false;
        });
    },
    addFixedAssets() {
      this.addDialog.type = "add";
      this.addDialog.show = true;
    },

    hideDialog() {
      this.addDialog.show = false;
    },
    getFundList() {
      this.crud.toQuery();
    },
    // 编辑
    editFixedAssets(row) {
      this.addDialog.type = "edit";
      this.addDialog.dialogRow = row;
      this.addDialog.show = true;
    },
    /** 删除 **/
    delect(row) {
      this.$confirm("即将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delectZhejiu([row.id]).then(response => {
            if (response.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.crud.toQuery();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px 10px 45px 10px;
  width: 100%;
  position: relative;
}
.this_main {
  position: relative;
  display: flex;
  flex-direction: row;

  .main-left {
    position: relative;
    width: 20%;
    padding: 5px;
    border: 1px solid #ccc;
    display: flex;
    display: none;
    flex-direction: column;
    .el-button {
      color: #000;
      justify-content: flex-end !important;
    }
    .main-left-title {
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      background: #ccc;
    }
  }

  .main-right {
    width: 100%;
    height: 820px;
    margin-left: 10px;
    position: relative;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    .this-table {
      flex: 1;
    }
  }
}
// ::v-deep(.el-form-item) {
//   margin-bottom: 10px !important;
// }

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  // 设置颜色
  background-color: #5f95cc !important;
}
.el-card__header {
  padding: 5px;
}
.el-card__body {
  padding: 5px;
}
</style>
